<template>
  <div>我是左侧组件</div>
  <div>数量为：{{ count }}</div>
  <div>{{ message }}</div>
  <button @click="count++">增加1</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(100)
const message = ref('')
import { onDeactivated, onActivated, defineEmits } from 'vue'
onDeactivated(() => {
  message.value += '被缓存了'
  emits('pubMessage', message.value)
})
onActivated(() => {
  message.value += '被激活了'
  emits('pubMessage', message.value)
})

const emits = defineEmits<{
  (e: 'pubMessage', value: string): void
}>()
</script>
<style scoped></style>
